<template>
  <!-- 新增设备照片 -->
  <view class="deviceNew">
    <view class="content">
      <view class="content-item">
        <view class="wrapper-bar">
          <view class="wrapper-bartitle">
            <!-- <image :src="baseImgUrl + 'qi-icon.png'" mode=""></image> -->
            {{ options.companyName }}
          </view>
        </view>

        <u-cell-group :border="false">
          <!-- 选择设备类型 -->
          <u-cell :titleStyle="titleStyle" title="选择设备类型" clickable isLink :rightIconStyle="rightIconStyle"
            @click="cellClick('deviceConfigId', 'deviceConfigName')">
            <text slot="icon" class="required">*</text>
            <view slot="value" :class="form.deviceConfigIdDesc ? 'cell-noEmpty' : 'cell-empty'">
              {{ form.deviceConfigIdDesc || "请选择" }}
            </view>
          </u-cell>
          <!-- 设备名称 -->
          <u-cell :titleStyle="titleStyle" title="设备名称">
            <text slot="icon" class="required">*</text>
            <u-input v-model="form.deviceName" data-type="workPerson" placeholder="请输入" slot="value" fontSize="14"
              placeholderClass="placeholderClass" inputAlign="right" border="none" :maxlength="30"
              :required="true"></u-input>
          </u-cell>
          <!-- 设备数量 -->
          <u-cell :titleStyle="titleStyle" title="设备数量">
            <text slot="icon" class="required">*</text>
            <u-input v-model="form.deviceCount" data-type="workPerson" placeholder="请输入" slot="value" fontSize="14"
              placeholderClass="placeholderClass" inputAlign="right" border="none" :maxlength="3"
              :required="true"></u-input>
          </u-cell>
          <!-- 设备编号 -->
          <u-cell :titleStyle="titleStyle" title="设备编号">
            <text slot="icon" style="width: 15rpx"></text>
            <u-input v-model="form.deviceNo" data-type="workPerson" placeholder="请输入" slot="value" fontSize="14"
              placeholderClass="placeholderClass" inputAlign="right" border="none" :maxlength="30"
              :required="true"></u-input>
          </u-cell>

          <!-- 设备过期时间  -->
          <u-cell :titleStyle="titleStyle" title="设备过期时间" clickable isLink :rightIconStyle="rightIconStyle">
            <text slot="icon" style="width: 15rpx"></text>
            <view slot="value" data-type="expirationTimeName" @click="cellTimeClick"
              :class="form.expirationTimeName ? 'cell-noEmpty' : 'cell-empty'">
              {{ form.expirationTimeName || "请选择" }}
            </view>
          </u-cell>

          <u-cell :titleStyle="titleStyle" title="设备照片" :border="false">
            <text slot="icon" class="required">*</text>
          </u-cell>

          <view class="upload-view">
            <u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="file" :maxCount="1"
              width="110" height="90">
              <image :src="baseImgUrl + 'upload-icon.png'" style="width: 220rpx; height: 180rpx"></image>
            </u-upload>
          </view>
        </u-cell-group>
      </view>
    </view>

    <view class="btns">
      <button class="reset-btn lt cancelBtn" type="primary" @click="resethandle">
        取消
      </button>
      <button class="submit-btn" type="primary" @click="submitHandle">
        保存
      </button>
    </view>

    <u-picker :show="pickerShow" :columns="columns" :keyName="keyName" @confirm="showConfirm" @close="pickerClose"
      @cancel="pickerCancel" :closeOnClickOverlay="true"></u-picker>

    <!-- 时间选择器 -->
    <u-datetime-picker ref="datetimePicker" :show="datetimeShow" v-model="timeValue" mode="date" :formatter="formatter"
      :minDate="minDate" :maxDate="maxDate" @close="pickerTimeClose" @cancel="pickerTimeClose(1)"
      @confirm="showTimeConfirm" :closeOnClickOverlay="true"></u-datetime-picker>
  </view>
</template>

<script>
  import {
    featureQueryDeviceType,
    featuredEquipment
  } from "@/api/home.js";
  import {
    Toast,
    navBack,
    formatters,
    dayTurnTime,
    getHeader,
    uploadFile
  } from "@/utils/util.js";
  import mixin from "@/utils/mixin.js";

  export default {
    name: "deviceNew",
    mixins: [mixin],
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        baseURL: this.$baseURL,
        options: {},
        form: {},
        errorType: ["none"],
        fileList: [],
      };
    },
    onLoad(options) {
      this.options = options;
    },
    methods: {
      formatter(type, value) {
        if (type === "year") {
          return `${value}年`;
        }
        if (type === "month") {
          return `${value}月`;
        }
        if (type === "day") {
          return `${value}日`;
        }
        return value;
      },
      cellTimeClick(e) {
        this.cellType = e.currentTarget.dataset.type;
        this.maxDate = new Date(2099, 0, 1).getTime();
        var minDateNum = +new Date(); //获取当前时间的毫秒数

        switch (this.cellType) {
          case "expirationTimeName":
            this.minDate = minDateNum;
            this.timeValue = this.minDate;
            break;
          default:
            break;
        }

        setTimeout(() => {
          this.datetimeShow = true;
        }, 100);
      },
      pickerTimeClose(e) {
        if (e) {
          switch (this.cellType) {
            case "expirationTimeName":
              this.form.expirationTime = "";
              this.form.expirationTimeName = "";
              break;
            default:
              break;
          }
        }
        this.datetimeShow = false;
      },
      /* 时间选择器 确定 */
      showTimeConfirm(e) {
        let arr = e.value;
        if (arr) {
          switch (this.cellType) {
            case "expirationTimeName":
              this.form.expirationTimeName = formatters(arr, "YY/MM/DD");
              this.form.expirationTime = dayTurnTime(
                this.form.expirationTimeName
              );
              break;
            default:
              break;
          }
        }
        this.datetimeShow = false;
      },
      /* cell 点击 */
      cellClick(type, name) {
        this.keyName = name;
        this.cellType = type;
        let code = "";
        switch (this.cellType) {
          case "deviceConfigId":
            code = "deviceConfigId";
            break;
          default:
            break;
        }

        featureQueryDeviceType().then((res) => {
          this.columns[0] = res.result || [];
          this.pickerShow = true;
        });
      },
      /* 选择器 确定 */
      showConfirm(e) {
        let arr = e.value;
        if (arr.length) {
          let obj = arr[0];
          switch (this.cellType) {
            case "deviceConfigId":
              this.form.deviceConfigId = obj.id;
              this.form.deviceConfigIdDesc = obj.deviceConfigName;

              if (obj.id != "1552100659804250113") {
                this.form.expirationTime = "";
                this.form.expirationTimeName = "";
              }
              break;
            default:
              break;
          }
        }
        this.pickerShow = false;
      },
      afterRead(info) {
        let _this = this;

        uploadFile({
            url: "/web/sys/upload/upload_file",
            filePath: info.file.url,
            name: "file",
            formData: {
              type: 8,
            },
          })
          .then((res) => {
            let {
              fullPath
            } = res.result;
            _this.fileList.push({
              url: fullPath
            });
            _this.form.deviceImage = fullPath;
          })
          .finally(() => {

          })
      },
      deletePic() {
        this.fileList = [];
        this.form.deviceImage = "";
      },
      resethandle() {
        uni.navigateBack();
      },
      submitHandle() {
        let {
          deviceConfigIdDesc,
          deviceName,
          deviceCount,
          deviceImage
        } =
        this.form;

        if (!deviceConfigIdDesc) {
          Toast("请选择设备类型");
          return;
        }

        if (!deviceName) {
          Toast("请输入设备名称");
          return;
        }

        if (!deviceCount) {
          Toast("请输入设备数量");
          return;
        }

        let number = /^[0-9]*$/;
        if (!number.test(deviceCount)) {
          Toast("设备数量请输入纯数字");
          return;
        }

        if (!deviceImage) {
          Toast("请上传设备照片");
          return;
        }

        let data = {
          companyMessageId: this.options.companyMessageId,
          ...this.form,
        };

        featuredEquipment(data).then((res) => {
          if (res.code == 200) {
            Toast("添加成功");
            navBack();
          }
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  .deviceNew {
    flex: 1;
    background-color: #f9f9f9;

    .content {
      margin: 0 auto;
      margin-top: 20rpx;
      margin-bottom: 20rpx;
      border-radius: 8rpx;
      width: calc(100% - 35rpx);
      height: calc(100vh - 84px);
      overflow-y: auto;

      .content-item {
        padding: 25rpx;
        background: #fff;

        .upload-view {
          padding-left: 30rpx;
        }

        /deep/.u-input {
          flex: 2;
        }
      }

      .wrapper-bar {
        display: flex;
        justify-content: space-between;
        padding-bottom: 50rpx;
        height: 40rpx;

        .wrapper-bartitle {
          font-size: 30rpx;
          font-weight: bold;

          text {
            display: inline-block;
            margin-left: 8px;
            color: #ababab;
            font-size: 28rpx;
          }

          image {
            margin-bottom: -3rpx;
            margin-right: 10rpx;
            width: 36rpx;
            height: 36rpx;
          }
        }
      }
    }
  }
</style>